<template>
    <div :style="getStyle" class="btn-wrapper" @click="btnClick">
        <text :style="getFontStyle" class="btn-txt">
            <slot></slot>
        </text>
    </div>
</template>

<style scoped>
    .btn-wrapper {
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    .btn-txt {
        font-family: msyhl;
    }
</style>

<script>
    export default{
        props: {
            width: {
                type: Number,
                default: 120
            },
            height: {
                type: Number,
                default: 40
            },
            borderWidth: {
                type: Number,
                default: 1
            },
            borderColor: {
                type: String,
                default: '#313131'
            },
            borderRadius: {
                 type: Number,
                default: 6
            },
            marginLeft: {
                type: Number,
                default: 20
            },
            color: {
                type: String,
                default: '#313131'
            },
            fontSize: {
                type: Number,
                default: 24
            }
        },
        data(){
            return{}
        },
        methods: {
            btnClick(e){
                this.$emit("btnClick",e);
            }
        },
        computed: {
            getStyle(){
                return {
                    width: this.width,
                    height: this.height,
                    borderWidth: this.borderWidth,
                    borderColor: this.borderColor,
                    borderRadius: this.borderRadius,
                    marginLeft: this.marginLeft
                }
            },
            getFontStyle(){
                return {
                    fontSize: this.fontSize,
                    color: this.color
                }
            }
        }
    }
</script>
